<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { useIcon } from '@/hooks/web/useIcon'
import { reactive, watch } from 'vue'

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElDatePicker,
  ElSelect,
  ElOption,
  ElDivider,
  ElButton
} from 'element-plus'

const { t } = useI18n()

const addIcon = useIcon({ icon: 'gala:add' })
const delIcon = useIcon({ icon: 'material-symbols:delete-outline' })

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.id = currentRow.id
    form.paymentAmountType = currentRow.worth
    form.typeOfGoods = currentRow.goods_id
    form.locationOfGoods = currentRow.store_id
    form.modeOfTransport = currentRow.transport
    form.origin = currentRow.placestart
    form.relatedCustomers = currentRow.client_code
    form.warehousingTime = currentRow.buytime
    form.serviceCharge = currentRow.servicefee
    form.collectionOfFreight = currentRow.freight
    form.factoryRebate = currentRow.rebate
    form.priceDifferenceOfGoods = currentRow.chajia
    form.productNameRemarks = currentRow.remark
    form.warehousingItems = currentRow.piece
    form.value = currentRow.worth
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  id: '',
  paymentAmountType: '', //付款金额类型
  typeOfGoods: '', //货品种类
  locationOfGoods: '', //货物位置
  modeOfTransport: '', //运输方式
  origin: '', //始发地
  relatedCustomers: '', //关联客户
  warehousingTime: '', //入库时间
  serviceCharge: '', //服务费
  collectionOfFreight: '', //代收运费
  factoryRebate: '', //工厂返点
  priceDifferenceOfGoods: '', //货品差价
  productNameRemarks: '', //品名备注
  warehousingItems: '', //入库件数，
  value: '', //货值,
  pieceArray: [] //入库货物
})

// 付款金额类型
const paymentAmountTypeArr: any = reactive([
  {
    key: '0',
    value: '支付宝'
  },
  {
    key: 1,
    value: '微信'
  }
])

// 物品的种类选项
const typeOfGoodsArr: any = reactive([
  {
    key: 0,
    value: '衣服'
  },
  {
    key: 1,
    value: '裤子'
  },
  {
    key: 2,
    value: '鞋子'
  },
  {
    key: 3,
    value: '其他'
  }
])

// 货物位置选项
const locationOfGoodsArr: any = reactive([
  {
    key: 0,
    value: '北京'
  },
  {
    key: 1,
    value: '上海'
  }
])

// 运输方式
const modeOfTransportArr: any = reactive([
  {
    key: 0,
    value: '空运'
  },
  {
    key: 1,
    value: '水运'
  }
])

//始发地
const originArr: any = reactive([
  {
    key: 0,
    value: '上海'
  },
  {
    key: 1,
    value: '深圳'
  }
])

//关联客户
const relatedCustomersArr: any = reactive([
  {
    key: 0,
    value: '马超'
  },
  {
    key: 1,
    value: '赵云'
  }
])
const rkNumInput = () => {
  if (form.warehousingItems) {
    for (let i = 1; i <= form.warehousingItems; i++) {
      let pieceItem = reactive({
        key: i,
        title: `${t('warehousingEntryAddWrite.warehousingItems')} ${i} ${t(
          'warehousingEntryAddWrite.goodsEntry'
        )}：`,
        name: '',
        type: '',
        price: '',
        list: [
          {
            shopNum: '',
            bz: '',
            num: '',
            home: '',
            color: '',
            size: '',
            weight: ''
          }
        ]
      })
      form.pieceArray.push(pieceItem)
    }
  } else {
    form.pieceArray = []
  }

  console.log('---form.pieceArray---', form.pieceArray)
}

const addGoods = (pIndex) => {
  let goodsItem = {
    shopNum: '',
    bz: '',
    num: '',
    home: '',
    color: '',
    size: '',
    weight: ''
  }
  form.pieceArray[pIndex].list.push(goodsItem)
}
const delGoods = (pIndex, index) => {
  form.pieceArray[pIndex].list.splice(index, 1)
}

defineExpose({
  getFormData: () => {
    return form
  }
})
</script>

<template>
  <ElForm :model="form" label-width="auto">
    <ElRow>
      <ElCol :span="8">
        <ElFormItem label-width="100px" :label="t('warehousingEntry.typeOfGoods')">
          <ElSelect
            v-model="form.typeOfGoods"
            :placeholder="t('alertEn.PleaseSelectThetypeOfGoods')"
            filterable
          >
            <ElOption
              v-for="item in typeOfGoodsArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="100px" :label="t('warehousingEntry.locationOfGoods')">
          <ElSelect
            v-model="form.locationOfGoods"
            :placeholder="t('alertEn.PleaseSelectThelocationOfGoods')"
            filterable
          >
            <ElOption
              v-for="item in locationOfGoodsArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow>
      <ElCol :span="8">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.modeOfTransport')">
          <ElSelect
            v-model="form.modeOfTransport"
            :placeholder="t('alertEn.PleaseSelectThemodeOfTransport')"
            filterable
          >
            <ElOption
              v-for="item in modeOfTransportArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="100px" :label="t('router.origin')">
          <ElSelect v-model="form.origin" :placeholder="t('alertEn.PleaseSelectTheorigin')">
            <ElOption
              v-for="item in originArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.relatedCustomers')">
          <ElSelect v-model="form.relatedCustomers" :placeholder="t('common.inputText')" filterable>
            <ElOption
              v-for="item in relatedCustomersArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElForm>
      <ElCol :span="8">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.warehousingTime')">
          <ElDatePicker
            v-model="form.warehousingTime"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="t('alertEn.PleaseSelectTheStorageTime')"
            filterable
            :shortcuts="[
              {
                text: '今天',
                value: new Date()
              }
            ]"
          />
        </ElFormItem>
      </ElCol>
    </ElForm>
    <ElRow>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.value')">
          <ElInput v-model="form.value" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.serviceCharge')">
          <ElInput v-model="form.serviceCharge" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.collectionOfFreight')">
          <ElInput v-model="form.collectionOfFreight" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.factoryRebate')">
          <ElInput v-model="form.factoryRebate" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntry.paymentType')">
          <ElSelect
            v-model="form.paymentAmountType"
            :placeholder="t('alertEn.PleaseSelectPaymentType')"
            filterable
          >
            <ElOption
              v-for="item in paymentAmountTypeArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="100px"
          :label="t('warehousingEntryAddWrite.priceDifferenceOfGoods')"
        >
          <ElInput v-model="form.priceDifferenceOfGoods" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntry.productNameRemarks')">
          <ElInput v-model="form.productNameRemarks" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.warehousingItems')">
          <ElInput v-model="form.warehousingItems" @input="rkNumInput" />
        </ElFormItem>
      </ElCol>
    </ElRow>

    <ElRow v-for="(vforPieceItem, index) in form.pieceArray" :key="index">
      <ElCol :span="24">
        <ElRow class="listForItem">
          <ElCol :span="1">
            <ElDivider />
          </ElCol>
          <ElCol :span="4">{{ vforPieceItem.title }}</ElCol>
          <ElCol :span="4">
            <ElFormItem :label="t('warehousingEntry.typeOfGoods')">
              <ElSelect
                v-model="vforPieceItem.type"
                :placeholder="t('alertEn.PleaseSelectThetypeOfGoods')"
                filterable
              >
                <ElOption
                  v-for="item in typeOfGoodsArr"
                  :key="item.key"
                  :label="item.value"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="7">
            <ElFormItem :label="t('warehousingEntryAddWrite.name')">
              <ElInput v-model="vforPieceItem.name" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="7">
            <ElFormItem :label="t('warehousingEntryAddWrite.value')">
              <ElInput v-model="vforPieceItem.price" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="1">
            <ElDivider />
          </ElCol>
        </ElRow>
      </ElCol>
      <ElCol :span="24">
        <ElRow v-for="(goodsItem, j) in vforPieceItem.list" :key="j">
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrderAddWrite.goodsNo')">
              <ElInput v-model="goodsItem.shopNum" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrderAddWrite.number')">
              <ElInput v-model="goodsItem.num" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrderAddWrite.roomNo')">
              <ElInput v-model="goodsItem.home" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrderAddWrite.color')">
              <ElInput v-model="goodsItem.color" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrderAddWrite.size')">
              <ElInput v-model="goodsItem.size" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label-width="100px" :label="t('purchaseOrderAddWrite.weight')">
              <ElInput v-model="goodsItem.weight" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="22">
            <ElFormItem label-width="100px" :label="t('purchaseOrderAddWrite.notes')">
              <ElInput v-model="goodsItem.bz" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="1" :offset="1">
            <ElButton
              v-if="j == vforPieceItem.list.length - 1"
              type="primary"
              :icon="addIcon"
              circle
              @click="addGoods(index)"
            />
            <ElButton v-else type="danger" :icon="delIcon" circle @click="delGoods(index, j)" />
          </ElCol>
        </ElRow>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less">
.listForItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-col:nth-of-type(2) {
    font-size: var(--el-form-label-font-size);
    padding: 0 15px;
  }
  .el-col:nth-of-type(1) {
    padding-right: 15px;
  }
  .el-col:nth-of-type(6) {
    padding-left: 15px;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-form-item--default {
    margin-bottom: 0;
  }
}
</style>
